<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
        <script type="text/javascript" src="lib/three84.js"></script>
        <script type="text/javascript" src="lib/OrbitControls.js"></script>
        <script type="text/javascript" src="lib/LinaCharts.js"></script>
        <script type="text/javascript" src="lib/jquery-2.0.3.min.js"></script>
    </head>
    
    <body>
        <canvas id="mainCanvas0" width="400" height="400"></canvas>
        <canvas id="mainCanvas1" width="400" height="400"></canvas>
        <canvas id="mainCanvas2" width="400" height="400"></canvas>
        <canvas id="mainCanvas3" width="400" height="400"></canvas>
        <script type="text/javascript">
            $(function(){

                test0 = new LinaCharts("mainCanvas0");
                test1 = new LinaCharts("mainCanvas1");
                test2 = new LinaCharts("mainCanvas2");
                test3 = new LinaCharts("mainCanvas3");

                
                var title = ["AP","ADC","上单","辅助","打野"];
                var data = [120,100,85,50,70];
                var color = [0x00EE00,0xEE7AE9,0xEE0000,0xB3EE3A,0x8A2BE2];
                
                /*
                * 饼状图
                * title 每一个扇形的标签
                * data  每一个扇形的数据
                * color 每一个扇形的颜色
                * style 风格 1-4
                */
                test0.pie(title,data,color,5,4);

                /*
                * 金字塔图，array[0]在最下面
                * title 每一次的标签
                * color 每一层的颜色
                * style 风格 1-3
                */
                test1.pyramid(title,color,1);

                var x_label = ["AP","ADC","上单","打野","辅助"];
                var x_color = [0x00EE00,0xEE7AE9,0xEE0000,0xB3EE3A,0x8A2BE2];
                var y_label = ["50分钟","40分钟","30分钟","20分钟","10分钟"];
                var data =  [
                                [[1,1,5800],[2,1,5980],[3,1,6020],[4,1,4750],[5,1,2400]],
                                [[1,2,3400],[2,2,3100],[3,2,3300],[4,2,2600],[5,2,1050]],
                                [[1,3,2200],[2,3,1880],[3,3,1620],[4,3,1550],[5,3,800]],
                                [[1,4,1600],[2,4,1400],[3,4,1300],[4,4,1000],[5,4,500]],
                                [[1,5,1000],[2,5,980],[3,5,620],[4,5,750],[5,5,300]],
                            ];

                /*
                * 柱状图
                * x_label x坐标系的标签
                * y_label y坐标系的标签
                * x_color 相同x坐标的颜色相同，所有相同x坐标的圆柱的颜色
                * unit z轴的单位
                * data 数据
                * style 风格 1-2
                */
                test2.bar(x_label,y_label,x_color,1000,data,1);

                /*
                * 折线图
                * x_label x坐标系的标签
                * y_label y坐标系的标签
                * x_color 相同x坐标的颜色相同，所有相同x坐标的圆柱的颜色
                * unit z轴的单位
                * data 数据
                */
                test3.line(x_label,y_label,x_color,1000,data);

            });     
        </script>
    </body>
</html>
